<template>
  <view
    class="color-transition-area"
    :style="[getStyle]"
    ref="colorArea">
	<!-- #ifdef MP -->
	<view style="width: 100%;height: 74rpx;"></view>
	<!-- #endif -->
    <!-- 顶部导航 -->
    <view class="header">
	  <image :src="logoImg" style="width: 62px;height: 31px;"/>	
      <!-- 搜索框 -->
      <view class="search-box">
        <input
          type="text"
          placeholder="搜索商品"
          class="search-input"
          @click="handleSearch"
        />
      </view>
    </view>

    <!-- 轮播图组件 -->
    <view class="banner-container">
      <swiper
        class="banner-slider"
        :indicator-dots="true"
        :autoplay="true"
        :interval="15000"
        :duration="500"
        indicator-color="rgba(255, 255, 255, 0.5)"
        indicator-active-color="#ffffff"
        @change="onBannerChange"
      >
        <swiper-item v-for="(banner, index) in banners" :key="banner.id">
          <image :src="banner.pic_url" :alt="banner.name" class="banner-image" @click="onBannerClick(banner)" />
        </swiper-item>
      </swiper>
    </view>
	
	<!-- 用于提取图片颜色的隐藏画布 -->
	<canvas canvas-id="canvas" style="position: absolute;left: -400px;"></canvas>
  </view>
</template>

<script>
import { BASE_URL } from '@/config/app';
import { getImageThemeColor } from '@/utils/index';

export default {
  name: 'Banner',
  data() {
    return {
      headerBgImg: BASE_URL + '/static/home/default/image/nav-top.png',
	  logoImg: BASE_URL + '/static/home/default/image/home_logo.png',
      currentIndex: 0,
	  banners: [],
	  imgList: [],
	  count: 0,
	  colors: []
    }
  },
  computed: {
    // 动态设置banner主题颜色背景
    getStyle() {
      const color = this.colors[this.currentIndex];
      // 使用半透明的渐变，让背景图片纹理能够透过显示
      const bgStyle = color ? `linear-gradient(to bottom, rgba(${color}, 0.7), #f4f4f4)` : '#f4f4f4';
      
      // 组合背景图片和背景颜色，图片在下层，渐变在上层
      return {
        background: `url(${this.headerBgImg}), ${bgStyle}`,
        backgroundSize: 'cover, cover',
        backgroundPosition: 'center, center',
        backgroundRepeat: 'no-repeat, no-repeat'
      }
    }
  },
  mounted() {
  	this.getSliderList();
  },
  methods: {
    // 处理搜索
    handleSearch() {
      uni.navigateTo({
      	url: '/pages/index/search'
      })
    },
    // 获取主题颜色
    getThemColor() {
      if (this.count >= this.imgList.length) {
        return;
      }
      
       getImageThemeColor(this, this.imgList[this.count], 'canvas', (color) => {
    	 const colors = [...this.colors]
    	 colors[this.count] = color
    	 this.colors = colors
    	 this.count++
    	 if (this.count < this.imgList.length) {
    	   this.getThemColor()
    	 }
       }, (error) => {
         // 设置默认颜色，确保数组长度正确
         const colors = [...this.colors]
         colors[this.count] = '255,255,255' // 默认白色
         this.colors = colors
         this.count++;
         if (this.count < this.imgList.length) {
           this.getThemColor();
         }
       })
    },
    // 处理轮播图变化
    onBannerChange(e) {
      // 在uniapp中，swiper的change事件直接返回当前索引，而不是包含detail的对象
      const newIndex = typeof e === 'number' ? e : (e.detail ? e.detail.current : 0);
      this.currentIndex = newIndex;
    },
    // 处理轮播图点击
    onBannerClick(banner) {
      this.$emit('click', banner);
    },
	async getSliderList() {
		let res = await this.$api.home.getSliderList.get({position: 1})
		this.banners = res.data
		
		// 处理轮播图颜色提取
		this.imgList = []
		if (this.banners.length > 0) {
		  this.banners.forEach(item => {
		    this.imgList.push(item.pic_url)
		  })
		}
		
		this.getThemColor()
	},
  }
}
</script>

<style scoped lang="scss">
/* 变色背景区域 */
.color-transition-area {
  position: relative;
  transition: background 0.5s ease; /* 添加背景过渡效果 */
  width: 100%;
  height: auto;
  left: 0;
  right: 0;
  overflow: hidden;
  padding-bottom: 20rpx;

  /* 确保背景图片和背景色都能正确显示 */
  background-blend-mode: normal;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  
  /* 确保内容正确包裹 */
  display: flex;
  flex-direction: column;
}

/* 顶部导航 */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: transparent; /* 改为透明，使用父容器的背景 */
  box-shadow: none; /* 移除阴影，使用父容器的样式 */
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 搜索框 */
.search-box {
  position: relative;
  height: 34px;
  width: calc(100% - 75px);
}

.search-input {
  width: 100%;
  height: 100%;
  padding: 0 40px 0 16px;
  border-radius: 17px;
  background-color: rgba(255, 255, 255, 0.9);
  color: #333;
  border: none;
  outline: none;
  font-size: 14px;
  line-height: 34px;
  box-sizing: border-box;
}

.search-input:focus {
  background-color: rgba(255, 255, 255, 1);
}

/* 轮播图容器 */
.banner-container {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 16px;
  
  /* 确保内容正确包裹 */
  display: flex;
  flex-direction: column;
}

.banner-slider {
  height: 180px;
  border-radius: 8px;
  overflow: hidden;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Swiper 组件样式调整 */
.banner-slider .uni-swiper-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.banner-slider .uni-swiper-dot-active {
  background-color: #ffffff !important;
}
</style>